import { type FC } from 'react';
import { View, ActivityIndicator, Text } from 'react-native';
import { useSafeState, useUpdateEffect } from 'ahooks';
import type { TabPageProps } from './types';
import styles from './styles';

const TabPage: FC<TabPageProps> = (props) => {
  const { active } = props;
  const [created, setCreated] = useSafeState(active);

  useUpdateEffect(() => {
    if (active) setCreated(true);
  }, [active]);

  const renderLoading = () => {
    return (
      <View style={styles.loading}>
        <ActivityIndicator size={24} color="#999" />
        <Text style={styles.loadingText}>Loading..</Text>
      </View>
    );
  }

  return created ? (
    <View style={styles.page}>
      {props.children}
    </View>
  ) : renderLoading();
}

export default TabPage;